<template>
  <section class="content">
    <Header title="做题记录">
      <div slot="left" @click="goBack" style="width: 100%;height: 100%;text-align: center;">
        <i class="iconfont icon-arrow-left" style="font-size: 22px"></i>
      </div>
    </Header>
    <div class="main">
      <div ref="mescroll" class="mescroll">
        <ul id="dataList">
          <li class="item_box" v-for="(item,index) in list" :key="index">
            <p class="title">
              [
              <span style="color: red;">{{item.label}}</span>]{{item.title}}
            </p>
            <p class="info">
              答题进度:
              <span style="color: red;">&nbsp;{{item.answered}}/{{item.total}}&nbsp;</span>道&nbsp;&nbsp;
            </p>
            <div class="date">
              <p></p>
              <div class="btn_box">
                <div class="btn orange" @click="goQuestion(item)">查看解析</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>
<script>
import Header from "../../components/Header/Header";
import MeScroll from "mescroll.js";
import moment from "moment";
import { reqDoRecord } from "../../api/index.js";

export default {
  data() {
    return {
      list: [],
      mescroll: null
    };
  },
  mounted() {
    self = this;
    self.mescroll = new MeScroll(self.$refs.mescroll, {
      down: {
        auto: true,
        callback: self.downCallback,
        textInOffset: "下拉刷新",
        textOutOffset: "松开立即刷新",
        textLoading: `<p>正在加载数据中...</p><p>最后更新: 今天${moment().format(
          "HH:mm"
        )}</p>`
      }
    });
  },
  methods: {
    // 下拉刷新
    async downCallback(mescroll) {
      console.log("zhixing ");
      const result = await reqDoRecord({});
      if (result.code === 1) {
        this.list = result.data.items;
        this.$nextTick(() => {
          mescroll.endSuccess(result.data.length);
        });
      } else {
        this.$vux.toast.show(`获取做题记录失败:${result.msg}`);
        this.$nextTick(() => {
          mescroll.endErr();
        });
      }
    },
    goQuestion(data) {
      this.$router.push({ path: "/question", query: {id: data.examId, type:  data.tags && data.tags.toLowerCase()} });
    },
    goDetail() {
      this.$router.push({ path: "/taochangDetail" });
    },
    goBack() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    }
  },
  components: { Header }
};
</script>
<style lang="less" scoped>
@import "../../util/theme.less";

.content {
  .be-full();

  .main {
    width: 100%;
    height: calc(~"100% - 46px");
    position: relative;

    ul {
      width: 100%;
      padding: 0 10px;
      background: @white;

      .item_box {
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px solid @border-base;

        .title {
          margin-bottom: 6px;
        }

        .info {
          font-size: 12px;
          color: @font-secondary;
          margin-bottom: 6px;
        }

        .date {
          .mix-flex-center();

          p {
            flex: 1;
            font-size: 12px;
            color: @font-regular;
          }

          .btn_box {
            flex: 1;
            .mix-flex-center();
            justify-content: flex-end;

            .btn {
              font-size: 12px;
              color: @white;
              border-radius: 5px;
              padding: 2px 5px;
              width: 40%;
              .mix-flex-center();
            }

            .blue {
              background: @primary;
              margin-right: 10px;
            }

            .orange {
              background: orange;
            }
          }
        }
      }
    }
  }
}
</style>
